// 全局指令
import defaltImg from '@/assets/images/200.png'
import { useIntersectionObserver } from '@vueuse/core'
const directivePlugin = {
  install (app) {
    app.directive('lazyload', {
      mounted (el, binding) {
        // el:img dom对象
        // binding.value  图片url地址
        const { stop } = useIntersectionObserver(
          // 监听目标元素
          el,
          ([{ isIntersecting }], observerElement) => {
            // 进入视口 isIntersecting 返回true
            // 进入视口一次后，请求已经发送了一次，应该立刻停止监听
            if (isIntersecting) {
              // 图片加载出错时，使用默认占位图
              el.error = function () {
                el.src = defaltImg
              }
              el.src = binding.value
              // 停止监听
              stop()
            }
          }
          // 刚进入视口区域就立刻执行回调 0 - 1
          // { threshold: 0 }
        )
      }
    })
  }
}
export default directivePlugin
